<br />
<div>
	<label>Hero Name: </label>
	<input #heroName (keyup)="add(heroName.value);heroName.value=''">
	<button (click)="add(heroName.value);heroName.value=''" type="button">Add</button>
</div>
<h2>Heroes List</h2>
<ul class='heroes'>
    <li *ngFor="let hero of heroes" (click)='onSelected(hero)' [class.selected]="hero === selectedHero">
        <span class="badge">{{hero.id}}</span> 
        <span>{{hero.name}}</span>
        <button class="delete" (click)="delete(hero); $event.stopPropagation()" >x</button>
    </li>
</ul>
<div *ngIf="selectedHero">
    <h2>{{ selectedHero.name | uppercase }} is my hero</h2>
    <button (click)="gotoDetail()">View Detail</button>
</div>
